<template>
  <div class="login-container">
    <div class="bg" :style="bg"></div>
    <div class="login">
      <h2>登录</h2>
      <van-form   @submit="loginbtn">
        <!-- 通过 pattern 进行正则校验 -->
        <van-field
          v-model.trim="userTel"
          name="pattern"
          placeholder="手机号"
          autocomplete="off"
          :rules="[{ pattern:telRule, message: '手机号格式不正确!' ,require:true}]"
        />

        <van-field
          :type="types"
          v-model.trim="userPassword"
          name="pattern"
          placeholder="密码"
          autocomplete="off"
          :rules="[{ pattern:passwordRule, message: '密码格式不正确!' ,require:true,}]"
        >
        </van-field>

        <!-- 显示隐藏密码框 -->
        <div class="eye">
            <van-icon @click="openeye" name="closed-eye" v-show="showeye" />
            <van-icon @click="closeeye " name="eye-o" v-show="!showeye" />
        </div>

        <p><span>立即注册</span><span>忘记密码</span></p>
        <div style="margin: 16px;">
          <van-button round block type="info">登录</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { v4 as uuidv4 } from 'uuid'
export default {
  data () {
    return {
      showeye: true, // 控制显示隐藏密码框
      userTel: '', // 用户手机号
      userPassword: '', // 用户密码
      types: 'password', // 通过该属性显示隐藏密码框
      telRule: /^1[3|4|5|7|8|9|][0-9]\d{8}$/, // 手机号检验规则
      passwordRule: /^[a-zA-Z0-9]{8,16}$/, // 密码校验规则
      bg: {
        backgroundImage: 'url(' + require('../../assets/loginsport.jpg') + ')',
        backgroundRepeat: 'no-repeat',
        backgroundSize: '100% 100%'
      }
    }
  },
  methods: {
    // 隐藏密码
    closeeye (e) {
      this.showeye = true
      this.types = 'password'
    },
    // 显示密码
    openeye (e) {
      this.showeye = false
      this.types = 'text'
    },
    // 触发 @submit  事件得回调(验证通过后才触发)
    loginbtn () {
      if (this.userTel === '17596905455' && this.userPassword === '00000000') {
        const userToken = uuidv4()
        localStorage.setItem('userToken', userToken)
        this.$router.push('/home')
      } else {
        this.$notify({ type: 'warning', message: '手机号或密码不正确!' })
      }
    }
  }
}
</script>

<style lang='less' scoped>
  .login-container {
    padding-top: 9rem;
    position: relative;
    .bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 41.7rem;
      background-color: blue;
      opacity: .2;
    }
    .login {
      width: 100%;
      // margin-top:9rem;
      position: relative;
      background-color: transparent;
      .eye {
        position: absolute;
        right: 3.6111rem;
        bottom:3.0556rem;
      }
      .van-form{
        p{
          width: 80%;
          display: flex;
          justify-content: space-between;
          margin: 0 auto;
          padding: 0 1.1111rem;
          font-size: .7778rem;
        }
        .van-cell{
        background-color: transparent;

          height: 4.4444rem;
          &::after{
            border: 0;
          }
          /deep/ .van-cell__value {
            .van-field__error-message {
              margin-left: 2.2222rem;
            }
            .van-field__body {
              input {
                width: 80%;
                height: 2.2222rem;
                border: 2px solid red;
                border-radius: 1.1111rem;
                padding-left: .8333rem;
                margin: 0 auto;
                }
            }
          }
        }

      }
      h2 {
        text-align: center;
        font-size: 2.2222rem;
        margin-bottom: 2.2222rem;
        letter-spacing: 3.3333rem;
        text-indent:3.3333rem;
        color: red;
      }
      button {
        position: absolute;
        bottom: -4.4444rem;
        left: 50%;
        width: 75%;
        transform: translateX(-50%);
        height: 2.2222rem;
        background-color: red;
        border-radius: 1.3889rem;
        border: 0;
        color: #fff;
        font-weight: 700;
        letter-spacing: 2.2222rem;
        text-indent: 2.2222rem;
        font-size:1.1111rem;
      }
    }
  }
</style>
